<template>
  <div class="SeatListH">
    <!--防止手势事件因为路由切换而失效-->
    <div v-finger:press-move="pressMove" v-finger:pinch="pinch"
         v-finger:multipoint-start="multipointStart"
         :style="imgStyle" class="borde" id="pinchdiv" ref="pinchdiv">

      <div style="display:flex; font-size: 12px">
        <div class="SeatLeft">
          <div style="height: 60px;">
            <div class="D14_15" v-for="(item,index) in ListA.slice(13,15)" :style="{left: ((index+1)*50)+'px'}">
              <div style="line-height: 20px">{{item.seatNo}}</div>
              <img :src="'static/icon/'+item.status+'0.png'" style="width: 25px;height: 25px;"
                   @click="SeatCheck(item)"/>
            </div>
          </div>

          <div style="width: 80px;height: 60px;background: #f2f2f2;position: absolute;top: 0px;left: 160px;"></div>

          <div style="display: flex;height: 300px;width: 280px; border-right: 3px #F2F2F2 solid;">
            <div style="width: 50px;height: 340px;">
              <div class="D8_13" v-for="(item,index) in ListA.slice(7,13).reverse()" :style="{top: (index*56)+'px'}">
                <div style="line-height: 20px">{{item.seatNo}}</div>
                <img :src="'static/icon/'+item.status+'0.png'" style="width: 25px;height: 25px;"
                     @click="SeatCheck(item)"/>
              </div>
            </div>


            <div class="E1_16">
              <div style="margin-top: 120px">联</div>
              <div>排</div>
              <div>座</div>
              <div class="left" v-for="(item,index) in ListC.slice(8,16).reverse()" :style="{top: (index*36.5)+'px'}">
                <div style="line-height: 20px;padding: 0 2px;flex: 1;">{{item.seatNo}}</div>
                <div style="flex: 1;"><img :src="'static/icon/'+item.status+'1.png'" style="width: 25px;height: 25px;"
                                           @click="SeatCheck(item)"/></div>
              </div>
              <div class="right" v-for="(item,index) in ListC.slice(0,8).reverse()" :style="{top: (index*36.5)+'px'}">
                <div style="flex: 1;"><img :src="'static/icon/'+item.status+'3.png'" style="width: 25px;height: 25px;"
                                           @click="SeatCheck(item)"/></div>
                <div style="line-height: 20px;padding: 0 2px;flex: 1;">{{item.seatNo}}</div>
              </div>
            </div>
          </div>
        </div>

        <div class="SeatRight">
          <div style="height: 60px;display: flex;">
            <div class="D17_23" v-for="(item,index) in ListA.slice(17,23).reverse()" :style="{left: (index*50)+'px'}">
              <div style="line-height: 20px">{{item.seatNo}}</div>
              <img :src="'static/icon/'+item.status+'0.png'" style="width: 25px;height: 25px;"
                   @click="SeatCheck(item)"/>
            </div>
          </div>
          <div style="width: 80px;height: 60px;background: #f2f2f2;position: absolute;top: 0px;right: 30px;"></div>

          <div style="display: flex">
            <div style="width: 90px;height: 230px;">
              <div class="D23_27" v-for="(item,index) in ListA.slice(23,27)" :style="{top: (index*56)+'px'}">
                <div style="line-height: 20px">{{item.seatNo}}</div>
                <img :src="'static/icon/'+item.status+'0.png'" style="width: 25px;height: 25px;"
                     @click="SeatCheck(item)"/>
              </div>
            </div>

            <div class="E16_26">
              <div style="margin-top: 60px">联</div>
              <div>排</div>
              <div>座</div>
              <div class="left" v-for="(item,index) in ListC.slice(21,26).reverse()" :style="{top: (index*42)+'px'}">
                <div style="line-height: 20px;padding: 0 2px;flex: 1;">{{item.seatNo}}</div>
                <div style="flex: 1;"><img :src="'static/icon/'+item.status+'1.png'" style="width: 25px;height: 25px;"
                                           @click="SeatCheck(item)"/></div>
              </div>
              <div class="right" v-for="(item,index) in ListC.slice(16,21).reverse()" :style="{top: (index*42)+'px'}">
                <div style="flex: 1;"><img :src="'static/icon/'+item.status+'3.png'" style="width: 25px;height: 25px;"
                                           @click="SeatCheck(item)"/></div>
                <div style="line-height: 20px;padding: 0 2px;flex: 1;">{{item.seatNo}}</div>
              </div>
            </div>

            <div style="width: 80px;height: 78px; border-bottom: 3px #F2F2F2 solid;margin-left: 160px">
              <div class="D15_17" v-for="(item,index) in ListA.slice(15,17).reverse()"
                   :style="{top: ((index+2)*60)+'px'}">
                <div style="line-height: 20px">{{item.seatNo}}</div>
                <img :src="'static/icon/'+item.status+'0.png'" style="width: 25px;height: 25px;"
                     @click="SeatCheck(item)"/>
              </div>
            </div>

          </div>
          <div style="width: 200px;height: 78px; border-bottom: 3px #F2F2F2 solid;margin-left:8px;display: flex">
            <div class="D27_29" v-for="(item,index) in ListA.slice(27,29)" :style="{left: ((index+1)*56)+'px'}">
              <div style="line-height: 20px">{{item.seatNo}}</div>
              <img :src="'static/icon/'+item.status+'0.png'" style="width: 25px;height: 25px;"
                   @click="SeatCheck(item)"/>
            </div>
          </div>


        </div>

      </div>

      <div class="SeatBottom">
        <div style="width: 70px;height: 40px;background: #f2f2f2;position: absolute;bottom: 0px;left: 00px;"></div>
        <div style="height: 60px;font-size: 12px;width:300px;display: flex;padding: 12px">
          <div class="D2_7" v-for="(item,index) in ListA.slice(2,7).reverse()" :style="{left: ((index+1)*60)+'px'}">
            <div style="line-height: 20px">{{item.seatNo}}</div>
            <img :src="'static/icon/'+item.status+'0.png'" style="width: 25px;height: 25px;"
                 @click="SeatCheck(item)"/>
          </div>
        </div>

        <div
          style="height: 90px;font-size: 12px;width:140px;display: flex;padding: 12px;position:relative;border-right: 3px #F2F2F2 solid;margin-top: -16px">
          <div class="D0_2" v-for="(item,index) in ListA.slice(0,2).reverse()" :style="{left: ((index+1)*60)+'px'}">
            <div style="line-height: 20px">{{item.seatNo}}</div>
            <img :src="'static/icon/'+item.status+'0.png'" style="width: 25px;height: 25px;"
                 @click="SeatCheck(item)"/>
          </div>
        </div>

        <div
          style="height: 40px;margin-top: -53px;padding:12px;width: 120px;border-top: 3px #F2F2F2 solid;position: absolute;right: 40px;transform:rotate(-30deg)">
          <div
            style="background: #F2F2F2;height: 20px;width: 100px;text-align: center;line-height: 20px;font-size: 15px;">
            前台
          </div>
        </div>
        <div style="border-top: 3px #f2f2f2 solid;position: absolute;right: 26px;width: 40px;margin-top:-83px"></div>


        <div
          style="background: #F2F2F2;height: 50px;width: 160px;text-align: center;line-height: 50px;font-size: 15px;margin-top: 30px">
          储物室
        </div>
      </div>

      <confirm v-model="show" @on-confirm="shijianxianzhi">
        <img src="static/icon/pop_icon_!@3x.png" style="width: 60px" alt="">
        <p>此座位已被预定，时间段选择有限制，你是否确定预定该座位？</p>
      </confirm>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import {mapState} from 'vuex'
  import {Confirm} from 'vux'
  import {UserInfo} from '../../api/mine'

  export default {
    props: ['seatList','GetSeatList'],//seatList
    data () {
      return {
        ListA: [],
        ListC: [],
        left: 0,
        top: 0,
        scale: 1,
        initScale: 1,
        cropWidth: 680,
        cropHeight: 420,
        show: false,
        selectItem: {},
        User: {},
        tiptext: '',
        show1: false,
      }
    },
    created () {
      // IDLE(1),   //空闲(未预约/未使用)
      //  ORDER(2),  //已预订
      //  USING(3);  //使用中
      this.setSeatList()
      UserInfo().then(res => {
        this.User = res.data.data
        console.log(JSON.stringify(this.User))
      })
    },
    computed: {
      imgStyle () {
        let self = this
        let tempObj = {
          transform: 'translate3d(' + self.left + 'px, ' + self.top + 'px, 0) scale(' + self.scale + ')'
        }
        return tempObj
      },
      ...mapState({
        CheckSeatList: state => state.CheckSeatList,
      })
    },
    methods: {
      setSeatList () {
        let seatList = this.seatList
        this.ListA = seatList.slice(0, 29)
        this.ListC = seatList.slice(29, 55)
        Vue.$vux.loading.hide()
      },
      multipointStart (e) {
        var self = this
        self.initScale = self.scale
        e.preventDefault()
      },
      pressMove (e) {
        let self = this
        self.left += e.deltaX
        self.top += e.deltaY
        let pinchdiv = window.getComputedStyle(this.$refs.pinchdiv)
        if (self.left > (this.cropWidth * this.scale) / 6) {
          self.left = (this.cropWidth * this.scale) / 6
        }
        if (self.left < -(this.cropWidth * this.scale) / 1.5) {
          self.left = -(this.cropWidth * this.scale) / 1.5
        }
        if (self.top > (this.cropHeight * this.scale) / 4) {
          self.top = (this.cropHeight * this.scale) / 4
        }
        if (self.top < -(this.cropHeight * this.scale)/2) {
          self.top = -(this.cropHeight * this.scale)/2
        }
        e.preventDefault()
      },
      pinch (e) {
        let self = this
        self.scale = self.initScale * e.zoom
        if (self.scale < 0.5) {
          self.scale = 0.5
          self.left = -this.cropWidth / 4.5
          self.top = -100
        }
        if (self.scale > 1.4) {
          self.scale = 1.4
        }
        e.preventDefault()
      },
      selectSeat (item) {
        let _this = this
        let CheckSeatList = []
        let seatList = this.seatList
        seatList.map(t => {
          if (item.id === t.id) {
            if (item.status == 4) {
              _this.GetSeatList.map(s => {
                if (item.id == s.id) {
                  item.status = s.status
                }
              })

              CheckSeatList.map((s, i) => {
                if (item.id == s.id) {
                  CheckSeatList.splice(i, 1)
                }
              })
              _this.$store.dispatch('DEL_SEAT', {
                CheckSeatList: item
              })
            } else if (item.status == 1) {
              item.status = 4
              CheckSeatList.push(item)
              _this.$store.dispatch('CHECKSEATLIST', {
                CheckSeatList: item
              })
            } else if (item.status == 2 || item.status == 3) {
              item.status = 4
              CheckSeatList.push(item)
              _this.$store.dispatch('CHECKSEATLIST', {
                CheckSeatList: item
              })
            }
          }
        })
        _this.seatList = seatList
        _this.setSeatList()
      },
      shijianxianzhi () {
        // this.show = false
        let _this = this
        this.selectSeat(_this.selectItem)
      },
      SeatCheck (item) {
        let _this = this
        _this.selectItem = item
        if (_this.User.balance == 0 && _this.User.setMealRemains) {
          Vue.$vux.confirm.show({
            content: `  <img src="static/icon/pop_icon_!@3x.png" style="width: 60px" alt="">
          <p>请先充值</p>`,
            showCancelButton: false,
            onConfirm () {
            }
          })
          return
        }

        if (item.status == 2 || item.status == 3) {
          //this.show = true
          Vue.$vux.confirm.show({
            content: `  <img src="static/icon/pop_icon_!@3x.png" style="width: 60px" alt="">
          <p>此座位已被预定，时间段选择有限制，你是否确定预定该座位？</p>`,
            onConfirm () {
              _this.selectSeat(item)
            }
          })
        } else {
          _this.selectSeat(item)
        }

      }
    },
    components: {
      Confirm
    },
  }
</script>

<style lang="less" type="text/less">
  .SeatListH {
    width: 680px;
    height: 500px;
    color: #808080;
    margin: 0 auto;
    position: relative;
    .vux-loading .weui-toast {
      top: 50% !important;
      transform: translateX(-50%) translateY(-50%) !important;
      width: 100px !important;
    }
    /*border: 3px #F2F2F2 solid;*/
    .SeatLeft {
      width: 250px;
      padding: 12px;
      .D14_15 {
        width: 25px;
        height: 50px;
        position: absolute;
      }
      .D8_13 {
        width: 60px;
        height: 50px;
        position: absolute;
        left: 25px;
        display: flex;
        margin-top: 90px;
      }
      .E1_16 {
        position: relative;
        left: 100px;
        width: 42px;
        border: 3px #F2F2F2 solid;
        border-radius: 5px;
        top: 40px;
        height: 280px;
        background: #DADADA;
        font-size: 12px;
        text-align: center;
        .left {
          width: 60px;
          height: 50px;
          position: absolute;
          display: flex;
          right: 50px
        }
        .right {
          width: 60px;
          height: 50px;
          position: absolute;
          left: 50px;
          display: flex;
        }
      }
    }
    .SeatRight {
      position: relative;
      font-size: 12px;
      padding: 12px;
      .D17_23 {
        width: 25px;
        height: 50px;
        position: absolute;
      }
      .D23_27 {
        width: 60px;
        height: 50px;
        position: absolute;
        left: 35px;
        display: flex;
        margin-top: 90px;
      }
      .D27_29 {
        width: 25px;
        height: 50px;
        position: absolute;
        margin-top: 12px;
      }
      .E16_26 {
        position: relative;
        width: 42px;
        left: 60px;
        margin-top: 14px;
        border: 3px #F2F2F2 solid;
        border-radius: 5px;
        height: 190px;
        background: #DADADA;
        font-size: 12px;
        text-align: center;
        .left {
          width: 60px;
          height: 50px;
          position: absolute;
          display: flex;
          right: 50px
        }
        .right {
          width: 60px;
          height: 50px;
          position: absolute;
          left: 50px;
          display: flex;
        }
      }
      .D15_17 {
        width: 60px;
        height: 50px;
        position: absolute;
        display: flex;
      }

    }
    .SeatBottom {
      display: flex;
      .D2_7 {
        width: 20px;
        height: 50px;
        position: absolute;
        margin-top: 40px;
        margin-left: 50px;
      }
      .D0_2 {
        width: 20px;
        height: 50px;
        position: absolute;
      }
    }
  }
</style>
